<template>
    <div class="memberBox">
        <Menus :webconfig="webinfo.webinfo" :data="webinfo.menusnav"></Menus>
        <div class="memberCoreBox flex justify-center align-center flex-direction">
            <div class="avatorBox flex justify-center align-center">
                <div class="avatorWidthBox flex justify-center align-center">
                    <div class="avatorCoreBox flex justify-center align-center">
                        <img class="avator" v-lazy="userInfos.avator">
                        <img class="coverAvator" v-lazy="userInfos.g_icon">
                    </div>
                    <div class="nicknameBox">
                        <div style="padding-bottom: 5px;" class="flex justify-start align-center">
                            <h2>{{ userInfos.nickname }}</h2>
                            <vs-button @click="showFormStatus=true" icon flat>
                                <i class='bx bxs-edit-alt'></i>
                            </vs-button>
                        </div>
                        <span>{{ userInfos.g_name }} - {{ userInfos.g_description }}</span>
                    </div>
                </div>
            </div>
            <div class="memberInfoBoxClass">
                <div class="memberTitle">我的收藏</div>
                <div class="memberItemCoreBox flex justify-center align-start">
                    <Waterfall v-if="articleData.total>0" :datas="articleData.data"></Waterfall>
                    <Empty v-else></Empty>
                </div>
                <div v-if="articleData.total>0&&articleData.total>articleData.data.length" class="loadingMore flex justify-center align-center flex-direction">
                    <vs-button @click="loadingMoreHandler" success flat>
                        <i class='bx bxs-chevron-down' ></i>
                    </vs-button>
                </div>
            </div>
        </div>
        <div :class="`formBox ${showFormStatus?'showform':''} flex justify-center align-center flex-direction`">
            <Upload @onsuccess="uploadHandler" :avator="userInfos.avator"></Upload>
            <div class="formItemBox flex justify-center align-center">
                <vs-input v-model="userInfos.nickname" state="success" success label="用户昵称" autocomplete="off" placeholder="昵称">
                    <template #icon>
                        <i class='bx bxs-id-card'></i>
                    </template>
                </vs-input>
            </div>
            <div class="formItemBox flex justify-center align-center">
                <vs-input v-model="userInfos.password" state="danger" danger type="password" autocomplete="off" label="密码（不更改密码可以留空）" placeholder="密码">
                    <template #icon>
                        <i class='bx bx-lock'></i>
                    </template>
                </vs-input>
            </div>
            <div v-if="userInfos.password" class="formItemBox flex justify-center align-center">
                <vs-input v-model="userInfos.repassword" state="danger" danger type="password"  autocomplete="off" label="重复密码" placeholder="重复密码密码">
                    <template #icon>
                        <i class='bx bx-lock'></i>
                    </template>
                    <template v-if="userInfos.password!==userInfos.repassword&&userInfos.repassword !== ''" #message-danger>
                        两次密码输入不一致
                    </template>
                </vs-input>
            </div>
            <div class="formItemBox flex justify-center align-center">
                <div class="gss flex justify-center align-center">C</div>
                <vs-input @click-icon="getCheckCodeHandler" state="warn" :label="`验证码（${seconds>0?seconds+'秒后可重新获取':'0'}）`" success v-model="checkcode" placeholder="请输入验证码" autocomplete="off" width="300" style="flex:1 1 auto;" icon-after>
                    <template #icon>
                        <i class='bx bx-code-block' ></i>
                    </template>
                    <template v-if="checkcode == ''" #message-danger>
                        请输入验证码
                    </template>
                </vs-input>
            </div>
            <div class="formItemBox flex justify-center align-center">
                <vs-button v-if="checkcode" @click="updateUserinfosHandler">更新数据</vs-button>
                <vs-button @click="showFormStatus=false">取消</vs-button>
            </div>
        </div>
        <Copy :webconfig="webinfo.webinfo" :frendlyData="webinfo.friends" :menuDatas="webinfo.menus" :bussinessData="webinfo.bussiness" :questionsData="webinfo.questions.data"></Copy>
    </div>
</template>
<script>
import { extendsMenus,extendsParams,extendsEncrypte } from '~/assets/inc/common.js';
import { apis } from '~/assets/inc/apis.js';
let timer = null;
export default{
    name: 'MemberPage',
    data() {
        return { 
            webinfo: 'default',
            userInfos:{
                avator:'',
                nickname:'',
                password:'',
                repassword:'',
            },
            articleData:{
                data:[],
                total:0,
            },
            pages:1,
            size:10,
            showFormStatus:false,
            checkcode:'',
            msgText:'获取验证码',
            seconds:0,
        }
    },
    async asyncData(context) {
        extendsEncrypte({},context.$axios);
        let res = await context.$axios.get(apis.indexApi,extendsParams({}));
        res.data.message.menusnav = extendsMenus([...res.data.message.menus]);
        return { webinfo: res.data.message }
    },
    head(){
        return {
            title: this.webinfo.webinfo.title,
            meta: [
                { charset: 'utf-8' },
                { name: 'viewport', content: 'width=device-width, initial-scale=1' },
                { name: 'keywords', content:  this.webinfo.webinfo.web_keywords},
                { hid: 'description',name: 'description',content: this.webinfo.webinfo.web_descriptons}
            ]
        }
    },
    mounted(){
        this.getMemberInfoHandler();
        this.$store.commit('setLoading',false);
    },
    beforeDestroy(){
        clearInterval(timer);
        this.$store.commit('setLoading',true);
    },
    methods:{
        //更新用户信息
        async updateUserinfosHandler(){
            if(this.userInfos.password&&!this.userInfos.repassword){
                this.$vs.notification({
                    progress: 'auto',
                    color:'danger',
                    position:'bottom-center',
                    title: 'Dias Softsoft Inc.',
                    text: '请重复密码'
                })
                return;
            }
            if(!this.checkcode){
                this.$vs.notification({
                    progress: 'auto',
                    color:'danger',
                    position:'bottom-center',
                    title: 'Dias Softsoft Inc.',
                    text: '验证码不能为空'
                })
                return;
            }
            this.$store.commit('setLoading',true);
            const { id,email,avator,nickname,password,repassword } = this.userInfos
            extendsEncrypte({id,email,avator,nickname,password,checkcode:this.checkcode},this.$axios);
            const res = await this.$axios.post(apis.updateeuserAPI,extendsParams({ id,email,avator,nickname,password:repassword||'',checkcode:this.checkcode }));
            if(res.data.success){
                this.userInfos = res.data.message;
                this.showFormStatus = false;
                localStorage.setItem('userinfo',JSON.stringify(res.data.message));
                this.$store.commit('setUserInfos',res.data.message);
            };
            this.$vs.notification({
                progress: 'auto',
                color:res.data.success?'success':'danger',
                position:'bottom-center',
                title: 'Dias Softsoft Inc.',
                text: res.data.success?'更新成功':res.data.message
            })
            this.$store.commit('setLoading',false);
        },
        //获取邮箱验证码
        async getCheckCodeHandler(){
            this.checkcode = '';
            if(this.seconds>0){
                this.$vs.notification({
                    progress: 'auto',
                    color:'danger',
                    position:'bottom-center',
                    title: 'Web Message!',
                    text: `${this.seconds}秒后才能重新获取`
                })
                return;
            }
            extendsEncrypte({ email:this.userInfos.email },this.$axios);
            const res = await this.$axios.post(apis.getOtherCheckcodeAPI,extendsParams({ email:this.userInfos.email }));
            console.log(res,'验证码')
            this.$vs.notification({
                progress: 'auto',
                color:res.data.code==200?'success':'danger',
                position:'bottom-center',
                title: 'Web Message!',
                text: res.data.message
            })
            if(res.data.code==200){
                this.seconds = 60;
                timer = setInterval(() => {
                    this.seconds -= 1;
                    if(this.seconds<=0){
                        this.seconds = 0;
                        clearInterval(timer);
                    }
                }, 1000);
            }
        },
        //上传头像
        uploadHandler(e){
            this.userInfos.avator = e.url;
        },
        //获取用户信息
        async getMemberInfoHandler(){
            extendsEncrypte({},this.$axios);
            const res = await this.$axios.get(apis.getMemberAPI,extendsParams({}));
            if(res.data.success) this.userInfos = res.data.message;
            if(res.data.code==1001){
                this.$vs.notification({
                    progress: 'auto',
                    color:'danger',
                    position:'bottom-center',
                    title: 'Dias Softsoft Inc.',
                    text: res.data.message
                })
                this.$router.replace({path:'/login'});
            }
            this.getCollectsDataHandler();
        },
        //获取我收藏的文章
        async getCollectsDataHandler(){
            extendsEncrypte({page:this.pages,count:this.size},this.$axios);
            const res = await this.$axios.post(apis.getCollectsAPI,extendsParams({page:this.pages,count:this.size}));
            if(res.data.success) this.articleData = res.data.message;
            if(res.data.code==1001){
                this.$vs.notification({
                    progress: 'auto',
                    color:'danger',
                    position:'bottom-center',
                    title: 'Dias Softsoft Inc.',
                    text: res.data.message
                })
                this.$router.replace({path:'/login'});
            }
        },
        //加载更多
        async loadingMoreHandler(){
            this.pages++;
            extendsEncrypte({page:this.pages,count:this.size},this.$axios);
            const res = await this.$axios.post(apis.getCollectsAPI,extendsParams({page:this.pages,count:this.size}));
            res.data.message.total = res.data.message.total;
            res.data.message.data.forEach(ele=>{
                ele.isShow = false;
            });
            this.articleData.data = this.articleData.data.concat(res.data.message.data);
        }
    }
}
</script>
<style lang="scss" scoped>
    .memberBox{
        width:100%;
        .memberCoreBox{
            .avatorBox{
                width:100%;
                padding: 150px 0 50px 0;
                background: url('https://api.dsnbc.com/images/20230728/148cc8d428d70a47e9bb88e2bfc79020.png') no-repeat bottom center;
                background-size: cover;
                .avatorWidthBox{
                    width:1200px;
                    .avatorCoreBox{
                        width:100px;
                        height:100px;
                        position: relative;
                        img{
                            margin: auto;
                        }
                        .avator{
                            width:75px;
                            height:75px;
                            border-radius: 50%;
                            box-shadow: inset 0px 0px 20px 0px rgba(0, 145, 255, 1);
                            position: absolute;
                            inset: 0;
                        }
                        .coverAvator{
                            width:100px;
                            height:100px;
                            position: absolute;
                            inset: 0;
                        }
                        
                    }
                    .nicknameBox{
                        padding-left: 20px;
                        color:var(--black);
                    }
                }
            }
            .memberInfoBoxClass{
                width:1200px;
                padding:50px 0px;
                .memberTitle{
                    font-size: 24px;
                    padding:0 20px 50px 20px;
                    color:var(--black);
                    font-weight: bold;
                }
                .memberItemCoreBox{
                    width:100%;
                    color:var(--black);
                }
                .loadingMore{
                    width:100%;
                }
            }
        }
        .formBox{
            width:100vw;
            height:100vh;
            top:-100vh;
            position: fixed;
            background: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(20px);
            z-index: 10000;
            transition: 0.5s all ease-in-out;
            .formItemBox{
                width:400px;
                padding:20px 0;
            }
        }
        .showform{
            inset: 0;
            margin: auto;
        }
    }
    @media screen and (min-width:0px) and (max-width:1280px) {
        .memberBox{
            width:100%;
            .memberCoreBox{
                .avatorBox{
                    width:100%;
                    padding: 15rem 0 5rem 0;
                    background: url('https://api.dsnbc.com/images/20230808/684067da1928a2adbdd35db70b633963.gif') no-repeat bottom center;
                    background-size: 100% 100%;
                    .avatorWidthBox{
                        width:100%;
                        flex-direction: column;
                        .avatorCoreBox{
                            width:10rem;
                            height:10rem;
                            position: relative;
                            img{
                                margin: auto;
                            }
                            .avator{
                                width:7.5rem;
                                height:7.5rem;
                                border-radius: 50%;
                                box-shadow: inset 0px 0px 2rem 0px rgba(0, 145, 255, 1);
                                position: absolute;
                                inset: 0;
                            }
                            .coverAvator{
                                width:10rem;
                                height:10rem;
                                position: absolute;
                                inset: 0;
                            }
                            
                        }
                        .nicknameBox{
                            padding:2rem 0 2rem 2rem;
                            color:var(--white);
                            display: flex;
                            flex-flow: column;
                            justify-content: center;
                            align-items: center;
                        }
                    }
                }
                .memberInfoBoxClass{
                    width:100%;
                    padding:5rem 0;
                    .memberTitle{
                        font-size: 2.4rem;
                        padding:0 2rem 5rem 2rem;
                        color:var(--black);
                        font-weight: bold;
                    }
                    .memberItemCoreBox{
                        width:100%;
                        color:var(--black);
                    }
                    .loadingMore{
                        width:100%;
                    }
                }
            }
            .formBox{
                width:100vw;
                height:100vh;
                top:-100vh;
                position: fixed;
                background: rgba(255, 255, 255, 0.5);
                backdrop-filter: blur(20px);
                z-index: 10000;
                transition: 1s all ease-in-out;
                .formItemBox{
                    width:80%;
                    padding:2rem 0;
                }
            }
            .showform{
                inset: 0;
                margin: auto;
            }
        }
    }
</style>